<template>
  <div style="display: inline-block;">
    <h3 style="text-align: center">创新指数：</h3>
    <div ref='radar' :style="{height:'250px',width:'300px'}"></div>
  </div>
</template>

<script>
  export default {
    props: {
      score: {
        type: Array,
      },
    },
    watch: {
      score() {
        this.radar();
      },
    },
    mounted() {
      this.radar();
    },
    methods: {
      radar() {
        let option = {
          tooltip: {},
          radar: {
            name: {
              textStyle: {
                color: '#fff',
                backgroundColor: '#999',
                borderRadius: 2,
                padding: [5, 5]
              }
            },
            indicator: [
              {name: '标题', max: 8},
              {name: '关键字', max: 8},
              {name: '摘要', max: 8},
            ],
            radius: '70%',
            center: ['50%', '55%'],
          },
          series: [{
            type: 'radar',
            data: [
              {
                value: this.score,
                name: '评分'
              }
            ]
          }]
        };
        let myCharts = this.$echarts.init(this.$refs.radar);
        myCharts.setOption(option);
        myCharts.resize();
      },
    }
  }
</script>

<style scoped>
</style>
